<template>
  <div class="seller">
    <div class="seller-chart" ref="seller_chart">
    </div>
  </div>
</template>

<script>
  export default {
    name: "Seller",
    data() {
      return {
        chartInstance: null,
        allData: null,
        currentPage: 1,
        totalPage: 1,
        timerId: null
      }
    },
    created() {
      this.$socket.registerCallback("sellerData", this.getChartData)
    },
    mounted() {
      this.initChart()
      // this.getChartData()
      this.$socket.send({
        action: 'getData',
        socketType: 'sellerData',
        chartName: 'seller',
        value: ''
      })
      window.addEventListener("resize", this.screenAdapter)
      this.screenAdapter()
    },
    destroyed() {
      clearInterval(this.timerId)
      window.removeEventListener('resize', this.screenAdapter)
      this.$socket.unRegisterCallback("sellerData")
    },
    methods: {
      initChart() {
        this.chartInstance = this.$echarts.init(this.$refs.seller_chart, "chalk")
        const initOperation = {
          title: {
            text: "▎商家销售统计",
            textStyle: {
              fontSize: 66
            },
            left: 20,
            top: 20
          },
          grid: {
            top: "20%",
            left: '3%',
            bottom: '3%',
            right: '6%',
            containLabel: true
          },
          xAxis: {
            type: "value"
          },
          yAxis: {
            type: "category"
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',
              z: 0,
              lineStyle: {
                width: 66,
                color: '#2D3443'
              }
            }
          },
          series: [
            {
              type: 'bar',
              barWidth: 66,
              label: {
                show: true,
                position: "right",
                textStyle: {
                  color: "white"
                }
              },
              itemStyle: {
                barBorderRadius: [0, 33, 33, 0],
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {offset: 0, color: '#5052EE'}, {offset: 1, color: '#AB6EE5'}
                ])
              }
            }
          ]
        }
        this.chartInstance.setOption(initOperation)
        this.chartInstance.on('mouseover', () => clearInterval(this.timerId))
        this.chartInstance.on('mouseout', () => this.startInterval())
      },
      getChartData(ret) {
        // const {data: ret} = await this.$http.get("/seller")
        this.allData = ret.sort((a, b) => a.value - b.value)
        let length = this.allData.length;
        this.totalPage = length % 5 === 0 ? length / 5 : length / 5 + 1
        this.updateChart()
        this.startInterval()
      },
      updateChart() {
        const start = (this.currentPage - 1) * 5
        const end = this.currentPage * 5
        const showData = this.allData.slice(start, end)
        const sellerNames = showData.map((item) => item.name)
        const sellerValues = showData.map(item => item.value)
        const dataOption = {
          yAxis: {
            data: sellerNames
          },
          series: [
            {
              data: sellerValues
            }
          ]
        }
        this.chartInstance.setOption(dataOption)
      },
      startInterval() {
        if (this.timerId) {
          clearInterval(this.timerId)
        }
        this.timerId = setInterval(() => {
          this.currentPage++
          if (this.currentPage > this.totalPage) {
            this.currentPage = 1
          }
          this.updateChart()
        }, 3000)
      },
      screenAdapter() {
        const titleFontSize = this.$refs.seller_chart.offsetWidth / 100 * 3.6
        const adapterOption = {
          title: {
            textStyle: {
              fontSize: titleFontSize
            },
          },
          tooltip: {
            axisPointer: {
              lineStyle: {
                width: titleFontSize,
              }
            }
          },
          series: [
            {
              barWidth: titleFontSize,
              itemStyle: {
                barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0],
              }
            }
          ]
        }
        this.chartInstance.setOption(adapterOption)
        this.chartInstance.resize()
      }
    }
  }
</script>